<template>
	<view class="ALL">
		<view class="forgetpassword">
			<view class="forgetpassword-top">
				<text class="forgetpassword-top-top">忘记密码</text>
				<text class="forgetpassword-top-down">请输入您的手机号码或邮箱查找您的账号</text>
			</view>
			<view class="phone">
				<input type="text" value="" placeholder-style="color:#666666;font-size:28rpx;font-weight:1000;font-family: PingFang-SC-Medium, PingFang-SC;" placeholder="请输入手机号 " @input="phone" />
				<text @tap="Captcha">获取验证码</text>
			</view>
			<view class="phone">
				<input type="text" value="" placeholder-style="color:#666666;font-size:28rpx;font-weight:1000;font-family: PingFang-SC-Medium, PingFang-SC;" placeholder="请输入验证码 " @input="number" />
			</view>
			<view class="search" @tap="ensure">
				<text>查找</text>
			</view>
			<uni-popup ref="popup" type="center">
				<view class="info">
					<view class="d-flex space-between" style="margin-bottom: 70rpx;">
						<view></view>
						<view class="title">修改密码</view>
						<img @click="closePopUp(0)" class="close-img" :src="close" alt="">
					</view>
					<view class="info-box">
						<view class="phone-box" >
							<input style="background-color: #FFFFFF;" v-model="newPwd" maxlength="16" type="text" password="true" 
							placeholder-style="password" placeholder="新密码">
						</view>
						<view class="phone-box">
							<input style="background-color: #FFFFFF;" v-model="newPwdCheck" maxlength="16" type="text" password="true" 
							placeholder-style="password" placeholder="请再次输入新密码">
						</view>
						<view class="button">
							<view class="appointment">
								确  认
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import apis from '../../api.js'
	import request from '../../requst.js' //引进requst方法
	import icons from "../../common/icons.js"
	export default {
		data() {
			return {
				passwordRetrieveForm: {
					newPassword: '',
					phone: '',
					verificationCode: ''
				},
				phoneNumber: '',
				Number:'',
				newPwd:null,
				newPwdCheck:null,
				close:icons.icons.close,
			}
		},
		methods: {
			password(e) {
				console.log(e.detail.value)
				this.passwordRetrieveForm.newPassword = e.detail.value
			},
			phone(e) {
				console.log(e.detail.value)
				this.phoneNumber = e.detail.value

			},
			number(e){
				this.Number = e.detail.value
			},
			Captcha() {
				apis.sendCaptcha({
					phoneNumber: this.phoneNumber
				}).then(res => {
					// this.passwordRetrieveForm.phone = this.phoneNumber
					console.log(res)
				})
				// request({
				// 	url: "/qijian/user/sendCaptcha",
				// 	method: 'GET',
				// 	data:{
				// 		phoneNumber:this.phoneNumber
				// 	},
				// 	success: function(res) {
				// 		console.log(res);
				// 	}
				// })
			},
			ensure() {
				this.$refs.popup.open();
			},
			closePopUp(){
				this.$refs.popup.close();	
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style scoped>
	.forgetpassword {
		width: 100%;
		height: 490rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.forgetpassword-top{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.forgetpassword-top-top{
		margin-left: 32rpx;
		margin-top: 60rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 1000;
		color: #333333;
	}
	.forgetpassword-top-down{
		margin-left: 32rpx;
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 1000;
		color: #666666;
		margin-top: 24rpx;
	}
	.phone{
		width: 686rpx;
		border-bottom: 2rpx solid #ebebeb;
		margin-top: 76rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.phone>input{
		padding: 20rpx 0;
	}
	.phone>text{
		width: 160rpx;
		height: 40rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		border: 1rpx solid #DD524D;
		color: #DD524D;
	}
	.search{
		width: 686rpx;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		margin-top: 60rpx;
		background: #000000;
		border-radius: 12rpx;
	}
	.search>text{
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #B6914E;
	}
	.info {
		width: 80vw;
		height: 34.85vh;
		background-color: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
		padding: 40rpx;
		border-radius: 12px;
		margin-bottom: 20vh;
	}
	.d-flex{
		display: flex !important;
	}
	.space-between{
		justify-content: space-between !important;
	}
	.title{
		font-size: 36rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}
	.close-img{
		width: 28rpx;
		height: 28rpx;
	}
	.info-box{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.phone-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #D6D6D6;
		margin-bottom: 40rpx;
	}
	.appointment{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #000000;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #B6914E;
		width: 80vw;
		height: 88rpx;
		border-radius: 6px;
		margin-top: 40rpx;
	}
</style>
